<template>
	<view class="Jy_shop_detail_page">
		<view class="Jy_shop_detail_container">
			<view class="Jy_shop_detail_head_group"
				:style="[{ 'padding-top': statusBarHeight + 'px' }, { 'background-color': backColor }]">
				<view class="Jy_shop_detail_head_box">
					<view class="back_icon_box" @click="getBack()">
						<u-icon name="arrow-left" color="#000000" size="20"></u-icon>
					</view>
					<view class="pg_title_group">
						<view class="pg_title_box" :style="{ opacity: opacity }"><text>商品详情</text></view>
					</view>
				</view>
			</view>
			<view class="Jy_shop_detail_swiper_group">
				<swiper class="swiper" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="300"
					circular="true">
					<swiper-item v-for="(item, index) in sliderImage" :key="index">
						<view class="swiper-item">
							<image :src="item" mode="aspectFill">
							</image>
						</view>
					</swiper-item>
				</swiper>
			</view>

			<view class="shop_detail_content_group">

				<view class="detail_active_group" >
					<view class="" v-for="(item,index) in activityH5">
						<view class="detail_active_top_box">
							<view class="left" v-if="item.type == '1'">
								<text>参与秒杀</text>
							</view>
							
							<view class="right_text">
								<text>参与活动 优惠享不停</text>
							</view>
						</view>
					</view>
					<view class="detail_active_bottom_group">
						<view class="time_down_text_box">
							<!-- <text>距离本商品活动结束还剩{{}}</text> -->
						</view>
					</view>
				</view>

				<view class="detail_basic_info_group">
					<view class="detail_basic_info_box">
						<view class="price_box">
							<text class="symbal">￥</text>
							<text class="size">{{storeSeckill.price}}</text>
						</view>
						<view class="shop_detail_name_box">
							<text class="active_tags"
								v-if="activityH5.length > 0 && activityH5[0].type === '1' ">秒杀</text>
							<text class="active_tags"
								v-if="activityH5.length > 0 && activityH5[0].type === '2' ">拼团</text>
							<text class="active_tags"
								v-if="activityH5.length > 0 && activityH5[0].type === '3' ">砍价</text>
							<text class="shop_name">{{storeSeckill.storeName}}</text>
						</view>
						<view class="xs_numner_group">
							<view class="xs-text-box">
								<text>英郎</text>
							</view>
							<view class="xs-number-box">
								<text>月销</text>
								<text class="number">{{storeSeckill.ficti}}</text>
							</view>
						</view>
						<view class="sale_button_group">
							<!-- 分享按钮 -->
							<view class="sale_button_box" @click="">
								<view class="sale_image_box">
									<image src="http://120.78.177.187:8083/crmebimage/public/mpImage/detail/sale.png" mode="aspectFill"></image>
								</view>
								<view class="sale_text_box">
									<text>分享</text>
								</view>
							</view>
						</view>
					</view>
				</view>

				<!-- 选择产品参数 -->
				<view class="Jy_select_parameters_group">
					<view class="ok_select_parame_group">
						<view class="text_box">
							<text>已选择</text>
						</view>
						<view class="select_parameter_box">
							<text>产品的参数</text>
						</view>
						<view class="right_icon_box">
							<u-icon name="arrow-right" color="#000000" size="14"></u-icon>
						</view>
					</view>
					<view class="parameter_group">
						<view class="image_parameter_list_group">
							<view class="image_parameter_list" v-for="(item, index) in productValue" :key="index">
								<view class="image_parameter_image_box">
									<text>{{item.suk}}</text>
									<text>库存：{{item.stock}}</text>
									<!-- <image src="" mode="aspectFill"></image> -->
								</view>
							</view>
						</view>
						<view class="total_parameter_box">
							<text>共6中规格可选</text>
						</view>
					</view>
				</view>


				<!-- 拼团公告栏 谁拼团成功 -->
				<view class="" v-if="activityH5.length > 0 && activityH5[0].type === '2' ">
					<view class="announcement_board_group">
						<view class="announcement_board_box">
							<view class="naiba_icon_box">
								<u-icon name="volume" color="#f83600" size="18"></u-icon>
							</view>
							<view class="ping_number_box">
								<text>已拼</text>
								<text>2</text>
								<text>件</text>
							</view>
							<view class="annmoun_swiper_group">
								<swiper class="swiper" :indicator-dots="false" :autoplay="true" :interval="3000"
									:duration="300" vertical="true" circular="true">
									<swiper-item v-for="(item, index) in 2" :key="index">
										<view class="swiper-item">{{index}}拼团成功</view>
									</swiper-item>
								</swiper>
							</view>
						</view>
					</view>

					<!-- 拼团玩法 -->
					<view class="playing_method_group">
						<view class="playing_method_container">
							<view class="playing_method_title_box">
								<text>拼团玩法</text>
							</view>
							<view class="playing_method_content_group">
								<view class="bz_content_box">
									<view class="bz_number_box">
										<text>1</text>
									</view>
									<view class="bx_text_box">
										<text>开团/参团</text>
									</view>
								</view>
								<view class="arro_right_image_box">
									<image src="http://120.78.177.187:8083/crmebimage/public/mpImage/detail/arrow_right.png" mode="aspectFill"></image>
								</view>
								<view class="bz_content_box">
									<view class="bz_number_box">
										<text>2</text>
									</view>
									<view class="bx_text_box">
										<text>邀请好友</text>
									</view>
								</view>
								<view class="arro_right_image_box">
									<image src="http://120.78.177.187:8083/crmebimage/public/mpImage/detail/arrow_right.png" mode="aspectFill"></image>
								</view>
								<view class="bz_content_box">
									<view class="bz_number_box">
										<text>3</text>
									</view>
									<view class="bx_text_box">
										<text>满员发货</text>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>


				<!-- 优品推荐 适用于普通商品 -->
				<view class="preferred_recommendation_group" v-if="good_list.length > 0">
					<view class="preferred_recommendation_box">
						<view class="preferred_recommendation_title_box">
							<text>优品推荐</text>
						</view>
						<view class="preferred_recommendation_list_group">
							<view class="preferred_recommendation_list" v-for="(item, index) in good_list" :key="index">
								<view class="preferred_recommendation_container">
									<view class="preferred_recommendation_image_box">
										<image :src="item.image" mode="aspectFill"></image>
									</view>
									<view class="preferred_recommendation_name_box">
										<text>{{item.storeName}}</text>
									</view>
									<view class="preferred_recommendation_price_box">
										<text>￥</text>
										<text>{{item.price}}</text>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>

				<!-- 评价中心 -->
				<view class="Jy_evaluation_enter_group">
					<view class="Jy_evaluation_enter_title_group">
						<view class="left_text_box">
							<text>用户评价</text>
							<text class="number">({{replyCount}})</text>
						</view>
						<view class="right_good_evaluation_group">
							<view class="evaluation_text_box">
								<text>好评</text>
								<text class="luve_box">{{replyChance || 0}}%</text>
							</view>
							<view class="right_icon_box">
								<u-icon name="arrow-right" color="#000000" size="14"></u-icon>
							</view>
						</view>
					</view>
					<view class="Jy_evaluation_enter_list_group" v-if="reply.length >0 ">
						<view class="Jy_evaluation_enter_list" v-for="(item, index) in reply" :key="index">
							<view class="user_head_image_box">
								<image src="http://120.78.177.187:8083/crmebimage/public/mpImage/address/default.png" mode=""></image>
							</view>
							<view class="user_basic_info_group">
								<view class="user_basic_info_container">
									<view class="user_send_eavl_group">
										<view class="user_basic_info_box">
											<view class="name_box">
												<text>用户名称</text>
											</view>
											<view class="star_number_box">
												<u-rate :count="scoreCount" active-color="#ff7500" v-model="scoreValue"
													readonly gutter="1" size="15"></u-rate>
											</view>
										</view>
										<view class="timer_box">
											<text>2021-3-3 11:30:22</text>
										</view>
									</view>
									<view class="guige_box">
										<text>规格:</text>
										<text class="color">【新品】红色</text>
									</view>
								</view>
								<view class="user_message_box">
									<text>这是一条用户评论的消息</text>
								</view>
								<view class="user_sai_image_group">
									<!-- 用户晒图 -->
									<view class="user_sai_image_list" v-for="(item, index) in reply" :key="index">
										<view class="user_sai_image_container">
											<image src="http://120.78.177.187:8083/crmebimage/public/mpImage/home/logo.png" mode="aspectFill"></image>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>

				<!-- 商品详情 -->
				<view class="shop_detail_image-group">
					<view class="shop_detail_title_box">
						<view class="image_box">
							<image :src="detailTitleImage" mode="widthFix"></image>
						</view>
					</view>
					<view class="showPic">
						<view class="detail_html" style="font-size: 0" v-html="storeSeckill.content"></view>
						<!-- <image src="https://img95.699pic.com/photo/50088/5720.jpg_wh860.jpg" mode="widthFix"></image> -->
					</view>
				</view>
			</view>

			<!-- 规格尺寸弹框 -->
			<u-popup :show="parmaShow" @close="parmaClose" @open="parmaOpen" :closeable="true" closeIconPos="top-right">
				<view class="params_group">
					<view class="shop_info_group">
						<view class="shop_info_container">
							<view class="shop_image_box">
								<image src="http://120.78.177.187:8083/crmebimage/public/mpImage/home/logo.png" mode="aspectFill"></image>
							</view>
							<view class="shop_basic_info_group">
								<view class="s_name_box">
									<text>这是商品的名称这是商品的名称这是商品的名称这是商品的名称这是商品的名称这是商品的名称这是商品的名称</text>
								</view>
								<view class="s_price_box">
									<text class="smyal">￥</text>
									<text class="number">3999</text>
								</view>
								<view class="s_number_box">
									<text>销量:</text>
									<text>2888</text>
								</view>
							</view>
						</view>
					</view>
					<view class="parma_list" v-for="(item, index) in 2" :key="index">
						<view class="parma_name_box">
							<text>参数名称(颜色)</text>
						</view>
						<view class="parma_small_group">
							<view class="parma_small_list" v-for="(jitem, jindex) in 4" :key="jindex">
								<view :class="[jindex == 1 ? 'active' : '', 'parma_small_container']">
									<text>这是一条参数{{jindex}}</text>
								</view>
							</view>
						</view>
					</view>
					<view class="parma_number_group">
						<view class="parma_number_text_box">
							<text>数量</text>
						</view>
						<view class="parma_small_number_box">
							<u-number-box v-model="shoppingNumberValue" @change="shoppingNumberValChange">
							</u-number-box>
						</view>
					</view>
				</view>
			</u-popup>


		</view>

		<view class="detail_tabbar_group">
			<view class="detail_tabbar_box">
				<view class="left_small_icon_group">
					<view class="couster_service_group" @click="">
						<view class="couster_icon_box">
							<image src="http://120.78.177.187:8083/crmebimage/public/mpImage/detail/cousterservice.png" mode="aspectFill"></image>
						</view>
						<view class="couster_text_box">
							<text>客服</text>
						</view>
					</view>
					<view class="collection_group" @click="">
						<view class="collection_icon_box">
							<image src="http://120.78.177.187:8083/crmebimage/public/mpImage/detail/collection1.png" mode="aspectFill"></image>
						</view>
						<view class="collection_text_box">
							<text>收藏</text>
						</view>
					</view>
					<view class="collection_group" @click="">
						<view class="collection_icon_box">
							<image src="http://120.78.177.187:8083/crmebimage/public/mpImage/detail/shoppringcart.png" mode="aspectFill"></image>
						</view>
						<view class="collection_text_box">
							<text>购物车</text>
						</view>
					</view>
				</view>
				<view class="right_buy_tabbar_box">
					<view class="right_buy_tabbar_container">
						<view class="add_cart_button_box" @click="">
							<text>加入购物车</text>
						</view>
						<view class="gou_button_box" @click="goBuy()">
							<text>立即购买</text>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 适配头部导航高度
				statusBarHeight: getApp().globalData.statusBarHeight,
				backColor: 'rgba(255, 255, 255, 0)',
				opacity: '0',
				// 评分总共多少等级 
				scoreCount: 5,
				scoreValue: 2,
				// 商品导航栏背景 
				detailTitleImage: this.$mAssetsPath.detailTitleImage,
				productId: '',
				// productDetail: {},
				sliderImage: [],
				storeSeckill: {},
				activityH5: [],
				productValue: [], //系统属性
				good_list: [],
				replyCount: 0, //总评论数量
				reply: [], //评论列表
				replyChance: 0,
				// 参数选项框
				parmaShow: false,
				// 商品参数步进器的值
				shoppingNumberValue: 1,
				productAttr: [],
			};
		},
		onPageScroll(res) {
			this.getPageScroll(res);
		},
		onLoad(option) {
			this.seckillId = option.seckillId;
			if (option.seckillId) {
				this.getSecckillDetail(option.seckillId);
			}
			this.getGood();

		},
		methods: {
			// 评论
			getrepy(productId) {
				let data = {
					"noAuth": true
				}
				// /api/front/reply/config
				this.sendRequest({
					url: "/api/front/reply/product/" + productId,
					data: data,
					success: res => {
						if (res.data.data.list) {
							let reply = res.data.data.list || [];
							this.$set(this, 'reply', reply);
						}
					}
				})

				this.sendRequest({
					url: "/api/front/reply/config" + productId,
					data: data,
					success: res => {
						if (res.data.data) {
							that.$set(this, 'replyChance', res.data.data.replyChance * 100);
							that.$set(this, 'replyCount', res.data.data.sumCount);
						}
					}
				})
			},

			// 优品推荐
			getGood() {

				this.sendRequest({
					url: "/api/front/product/good",
					success: res => {
						if (res.data.data.list) {
							let good_list = res.data.data.list || [];
							this.$set(this, 'good_list', good_list);
						}
					}
				})
			},
			// 秒杀商品详情
			getSecckillDetail(seckillId) {
				// let data = {
				// 	"type": "normal",
				// }
				let that = this;
				// 获取商品
				this.sendRequest({
					url: "/api/front/seckill/detail/" + seckillId,
					// data: data,
					success: res => {
						if (res.data.data) {
							// that.productDetail = res.data.data;
							let storeSeckill = res.data.data.storeSeckill;
							let productAttr = res.data.data.productAttr;
							let productValue = res.data.data.productValue;
							// 字符串数组转数组；
							let arrayImg = storeSeckill.sliderImage;
							this.sliderImage = JSON.parse(arrayImg);
							that.$set(that, 'storeSeckill', storeSeckill);
							that.$set(that, 'productAttr', productAttr);
							that.$set(that, 'productValue', productValue);
						}
					}
				})
			},


			// 返回上一页
			getBack() {
				uni.navigateBack();
			},
			getPageScroll(res) {
				//获取距离顶部距离
				const scrollTop = res.scrollTop;
				if (scrollTop >= 0) {
					// 导航条颜色透明渐变
					if (scrollTop <= 20) {
						this.backColor = 'rgba(255, 255, 255, 0)';
						this.opacity = '0';
					} else if (20 < scrollTop && scrollTop <= 100) {
						this.backColor = 'rgba(255, 255, 255, .5)';
						this.opacity = '.5';
					} else if (scrollTop > 100) {
						this.backColor = 'rgba(255, 255, 255, 1)';
						this.opacity = '1';
					}
				}
			},
			// 点击立即购买
			goBuy() {
				this.parmaShow = true;
			},
			// 参数选择弹框打开
			parmaOpen() {

			},
			// 参数选择弹框关闭
			parmaClose() {
				this.parmaShow = false
			},
			// 步进器的值发生改变
			shoppingNumberValChange(e) {

			}

		}
	};
</script>

<style lang="scss" scoped>
	@import 'shoppingDetail.scss';
</style>
